.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-neutral-opacity);
  z-index: var(--z-index-99);
  contain: strict;
}

.overlay .content {
  background: var(--color-bg-elevation-3);
  border-radius: var(--border-radius-elevation-3);
  box-shadow: var(--box-shadow-1);
  outline: none;
  display: flex;
  flex-direction: column;
  padding-inline: var(--outer-spacing-5) var(--outer-spacing-4);
  padding-block: var(--outer-spacing-4);
  gap: var(--outer-spacing-3);
  flex: 1;
}

.overlay .content .header {
  /* Needed to align the close button */
  margin-inline: 0 calc(-0.5 * var(--inner-spacing-3));
}

.overlay .content .header button {
  margin-block: calc(-0.5 * var(--inner-spacing-3)) 0;
}

.overlay .content .body {
  overflow: auto;
  padding-block: var(--outer-spacing-2);
  padding-inline: var(--outer-spacing-4);
  margin-inline: calc(var(--outer-spacing-4) * -1);
  flex: 1;

  /* Needed to remove the height from the child element so that Scrollbar is displayed correctly */
  & > *:last-child {
    height: auto;
  }
}

.overlay [role="dialog"] {
  display: flex;
  max-inline-size: calc(100% - var(--outer-spacing-8));
  max-block-size: calc(100% - var(--outer-spacing-8));
}

.overlay [role="dialog"][data-size="small"] {
  inline-size: var(--sizing-120);
}

.overlay [role="dialog"][data-size="medium"] {
  inline-size: var(--sizing-180);
}

.overlay [role="dialog"][data-size="large"],
.overlay [role="dialog"][data-size="large"] .content {
  inline-size: 100%;
  min-block-size: 50%;
}

.overlay,
.content {
  transition-property: opacity;
}
.content[data-status="open"],
.content[data-status="close"],
.overlay[data-status="open"],
.overlay[data-status="close"] {
  /* don't forget to change the duration Modal.tsx as well */
  transition-duration: 200ms;
}
.content[data-status="initial"],
.content[data-status="close"],
.overlay[data-status="initial"],
.overlay[data-status="close"] {
  opacity: 0;
}
